<template>
  <div class="divWrap">
    <div class="divLogin">
      <a-form :model="loginForm" label-width="0px" class="divContent">
        <a-form-item style="margin-right:0;">
          <a-input v-model:value="loginForm.username" id="username" placeholder="请输入账号">
          </a-input>
        </a-form-item>
        <a-form-item  style="margin-right:0;">
          <a-input type="password" placeholder="请输入密码" v-model:value="loginForm.password" id="password">
          </a-input>
        </a-form-item>
        <a-form-item style="margin-right:0;">
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
          </div>
          <a-input v-model:value="loginForm.code" id="username" placeholder="验证码">
          </a-input>
        </a-form-item>
        <div class="btnLogin">
          <a-button type="primary" @click="doLogin">登录</a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script>
  import { getCode } from "@/api/login";
  import { encrypt, decrypt } from '@/utils/jsencrypt'
export default {
  name: 'login',
  data () {
    return {
      codeUrl: "",
      loginForm: {
        username: "admin",
        password: "admin123",
        code: "",
        uuid: "",
        rememberMe: false
      },
      redirect: undefined
    }
  },
  created() {
    this.getCode();
  },
  mounted: function () {
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {
    getCode() {
      getCode().then(res => {
        console.log(res)
        this.codeUrl = "data:image/gif;base64," + res.img;
        this.loginForm.uuid = res.uuid;
      });
    },
    doLogin: function () {
      let _this = this
      _this.$store.dispatch("Login", this.loginForm)
              .then((res) => {
                console.log("xxxres", res)
                _this.$store.dispatch("GetInfo")
                        .then((resi) => {
                          console.log("GetInfores", resi)
                          this.$router.push({ path: this.redirect || "/" });
                        })
                        .catch((errori) => {
                          console.log("GetInfoerror", errori)
                        });
              })
              .catch((error) => {
                console.log("xxxerror", error)
              });
    }
  }
}
</script>

<style scoped>
  .divWrap{
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-color: #0086b3;
  }
  .divTitle{
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid #ddd;
  }
  .divLogin{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    margin: -190px 0 0 -175px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
  }
  .divContent{
    padding: 30px 30px;
  }
  .btnLogin{
    text-align: center;
  }
  .btnLogin button{
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
  }
</style>
